<template>
	<custom-nav></custom-nav>
	<view class="page-index" :style="pagePaddingTop">
		<template v-if="pageLoaded">
			<view class="container-basic">
				<view class="container-username-amount">
					<view class="wrap-username">Hi，{{showNickName}}</view>
					<view class="wrap-amount">
						<view>余额：</view>
						<view class="cont-amount">{{showAmount}}</view>
						<view class="btn-recharge" @tap="onRecharge">充值</view>
					</view>
				</view>
				<image :class="['wrap-avatar',showAvatar==-1?'':'user-avatar']"
					:src="showAvatar==-1?'/static/default_avatar.png':showAvatar" @tap="toMine" />
			</view>

			<view class="container-kingkong">
				<image class="img-border" src="/static/home_line.png"></image>

				<view class="container-tocommunicate">
					<view class="container-tocommunicate-main" @tap="toChat(baishitongInfo)">
						<view class="container-tocommunicate-slogn">
							<!-- {{baishitongInfo&&baishitongInfo.mid_table_remark_001?baishitongInfo.mid_table_remark_001:''}}
							 -->
							<image class="icon-baishitong" src="@/static/title_baishitong.png"></image>
						</view>
						<view class="tip-slogn">
							{{baishitongInfo&&baishitongInfo.mid_table_remark_002?baishitongInfo.mid_table_remark_002:''}}
						</view>
						<view class="btn-go">
							<image class="img-go" src="/static/icon_more_arrow.png"></image>
						</view>
					</view>
				</view>
				<view class="container-items">
					<view class="container-item-column">

						<view v-for="(item,idx) in leftIndustryList" :key="idx" class="wrap-item"
							@tap="handleTopic(item)">
							<view class="wrap-img-text">
								<image class="img-item" mode="widthFix"
									:src="showColumnPic(1,idx)">
								</image>
								<view class="item-label">
									{{item&&item.mid_table_remark_001?item.mid_table_remark_001:''}}
								</view>
							</view>
							<view class="tip-item">
								{{item&&item.mid_table_remark_002?item.mid_table_remark_002:''}}
							</view>
						</view>
					</view>
					<view class="container-item-column">

						<view v-for="(item,idx) in rightIndustryList" :key="idx" class="wrap-item"
							@tap="handleTopic(item)">
							<view class="wrap-img-text">
								<image class="img-item" mode="widthFix"
									:src="showColumnPic(2,idx)">
								</image>
								<view class="item-label tool">
									{{item&&item.mid_table_remark_001?item.mid_table_remark_001:''}}
								</view>
							</view>
							<view class="tip-item">
								{{item&&item.mid_table_remark_002?item.mid_table_remark_002:''}}
							</view>
						</view>
					</view>
				</view>
			</view>

			
			<view class="btn-news">
				<image class="img-news" src="/static/news/news.png" @tap="toNews" />
			</view>
			<view class="tabbar-border"></view>
		</template>
	</view>
	<custom-modal ref='refLoginModal' v-model:visible='showLogin' content='您未登录,请先登录？' :showCancelButton='false'
		@clickCallback="toLogin"></custom-modal>
	<comp-recharge v-model:visible='showRecharge' @refreshAmount="onRefreshAmount"></comp-recharge>
	<comp-recharge-offline v-model:visible='showRechargeOffline'></comp-recharge-offline>
	<custom-modal v-model:visible='showNetwork' content='网络异常或权限未开启' :showCancelButton='false'
		@clickCallback="onNetwordState" :needClose="false"></custom-modal>
</template>

<script setup>
	import {
		ref,
		computed,
		nextTick
	} from "vue"
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomModal from "@/components/custom-modal/index.vue"
	import CompRecharge from "/components/popup-recharge/index.vue"
	import CompRechargeOffline from "/components/popup-recharge-offline/index.vue"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		mockUserLogin
	} from "@/http/apis/loginAPI.js"
	import {
		getCustomerBaseInfo,
		getSystemUseOrderRelateRuleAndRecord
	} from "@/http/apis/customerBaseAPI.js"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	import {
		showToast
	} from "../../utils/frameApi"
	let pageLoaded = ref('false')
	const userStore = useUser();
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let userInfo = ref({
		nick_name: "-1",
		weichat_img: '-1',
		amount: '0'
	})
	let userAmountInfo = ref({})
	// 昵称显示
	const showNickName = computed(() => {
		if (userInfo.value && userInfo.value.nick_name && userInfo.value.nick_name != -1) {
			return userInfo.value.nick_name;
		}
		return "您未填写昵称"
	})
	// 头像显示
	const showAvatar = computed(() => {
		if (userInfo.value && userInfo.value.weichat_img && userInfo.value.weichat_img != -1) {
			return userInfo.value.weichat_img;
		}
		return "-1"
	})
	// 金额显示
	const showAmount = computed(() => {
		if (userAmountInfo.value && userAmountInfo.value.mid_table_remark_008 && userAmountInfo.value
			.mid_table_remark_008 != -1) {
			return parseFloat(userAmountInfo.value.mid_table_remark_008).toFixed(2);
		}
		return '0.00'
	})
	let showLogin = ref(false)

	const goLogin = () => {
		if (!userInfo.value || !userInfo.value.id_public_user_info || userInfo.value.id_public_user_info == 92) {
			showLogin.value = true;

			return false;
		}
		return true
	}
	const toLogin = () => {
		uni.reLaunch({
			url: "/pages/login/index"
		})
		showLogin.value = false;
	}
	// 加载分类
	// let industryList = ref([])
	const getIndustryList = () => {
		let postData = {
			invoke_method: "public_load_middle_table_list",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_ai_chatgpt",
			type_middle_app: 12001,
			type_inner_app: 1001,
			is_online: 0,
			pre_db_para_begin_idx: 0,
			pre_db_para_length_4_list: 100,
			pre_cmd_para_show_trade_info: true,
			pre_db_para_order_by_para: "id_public_middle_table asc",
		}
		return middleAPI(postData, false)
	}
	const showColumnPic = (column, idx) => {
		return `/static/icon_industry/icon_${column}_${idx%3+1}.png`
	}
	//充值
	let showRecharge = ref(false)
	let showRechargeOffline = ref(false)
	const onRecharge = () => {
		if (!goLogin()) {
			return;
		}
		let tmpShowRecharge = false;
		// #ifdef APP-PLUS
		let systemInfo = uni.getSystemInfoSync();
		if (systemInfo.platform.toLowerCase() == 'ios') {
			tmpShowRecharge = true;
		}
		// #endif
		showRecharge.value = tmpShowRecharge;
		showRechargeOffline.value = !tmpShowRecharge
	}
	// 点击头像去个人中心
	const toMine = () => {
		if (!goLogin()) {
			return;
		}
		uni.navigateTo({
			url: '/pages/my/index'
		})
	}
	// 点击前往新闻列表
	const toNews = () => {
		// if (!goLogin()) {
		// 	return;
		// }
		uni.navigateTo({
			url: '/pages/news/news-list'
		})
	}	
	// 行业页面
	const handleTopic = (item) => {
		if (!item) {
			return;
		}
		if (!goLogin()) {
			return;
		}
		uni.navigateTo({
			url: `/pages/topic/index?name=${encodeURIComponent(item.mid_table_remark_001)}&id=${item.id_public_middle_table}`
		})
	}
	// 百事通-花花聊天页面
	const toChat = (item) => {
		if (!item) {
			return;
		}
		if (!goLogin()) {
			return;
		}
		uni.navigateTo({
			url: `/pages/chat/index?name=${encodeURIComponent(item.mid_table_remark_001)}&id=${item.id_public_middle_table}`
		})
	}
	// 百事通，攻略，工具，指南，救援
	let baishitongInfo = ref(null);
	let strategyInfo = ref(null);
	let toolInfo = ref(null);
	let guideInfo = ref(null);
	let supportInfo = ref(null)
	let leftIndustryList = ref([])
	let rightIndustryList = ref([])
	const initData = async () => {
		let tmpUserInfo = await userStore.getUserInfo().catch(err => {
			console.log(err, "initData>>>")
		});
		if (!tmpUserInfo) {
			let mockUserLoginResult = await mockUserLogin();
			console.log(mockUserLoginResult, ">>>>>>")
		}
		console.log(tmpUserInfo, ">>>tmpUserInfo")

		uni.showLoading()
		let userInfoResult = await getCustomerBaseInfo({
			invoke_method: 'user_and_shop_info'
		}, false).catch((err) => {
			console.log(err, ">>>getUserInfoByApi")
		});
		if (userInfoResult) {
			userStore.setUserInfo(userInfoResult || {})
			Object.assign(userInfo.value, userInfoResult?.public_user_info || {})
		} else {
			uni.hideLoading()
			return;
		}
		let userAmoutResult = await getSystemUseOrderRelateRuleAndRecord({
			invoke_method: 'static_4_money',
			'pre_cmd_para_id_public_user_info': userInfo.value.id_public_user_info,
			'pre_cmd_para_type_list': 1211
		}, false).catch((err) => {
			console.log(err, ">>>getUserAmount")
			userAmountInfo.value = {};
		});
		if (userAmoutResult) {
			let big_data = userAmoutResult.big_data || [];
			let amount = big_data[0] || {}
			userAmountInfo.value = amount;
		} else {
			uni.hideLoading()
			return;
		}

		let industryResult = await getIndustryList().catch((err) => {
			console.log(err, '>>>industryResult...error')
		}, false)
		let leftList = [];
		let rightList = []
		let tmpIdx = 0;
		if (industryResult) {
			let result = industryResult?.page_content || []
			for (let i = 0; i < result.length; i++) {
				let item = result[i]
				if (item.mid_table_remark_001 == '百事通') {
					baishitongInfo.value = item;
					continue;
				} else {
					if (tmpIdx % 2 == 0) {
						leftList.push(item)
					} else {
						rightList.push(item)
					}
					tmpIdx++;
				}
			}
			// industryList.value = result;
			leftIndustryList.value = leftList;
			rightIndustryList.value = rightList
			uni.hideLoading()
		} else {
			uni.hideLoading()
			return;
		}
		nextTick(() => {
			uni.hideLoading()
			pageLoaded.value = true;
		})
	}
	let showNetwork = ref(false)
	onShow(() => {
		uni.showLoading()
		uni.getNetworkType({
			success: (res) => {
				if (res.networkType == 'none') {
					console.log(res, '>>1')
					showNetwork.value = true;
					uni.hideLoading()
					uni.onNetworkStatusChange((resnet) => {
						console.log(resnet, ">>2")
						if (resnet.isConnected) {
							initData();
							showNetwork.value = false
							uni.offNetworkStatusChange()
						} else {
							uni.hideLoading()
							showNetwork.value = true;
							console.log(resnet, ">>>>>>")
						}
					})
				} else {
					initData()
				}
			},
			fail: (err) => {
				console.log(err)

				uni.hideLoading()
				showNetwork.value = true;
			}
		})
		// initData()
	})
	const onNetwordState = () => {
		console.log(11, ">>>")
		showNetwork.value = false;
		// uni.getNetworkType({
		// 	success: (res) => {
		// 		if (res.networkType == 'none') {
		// 			console.log(res, '>>1')
		// 			uni.onNetworkStatusChange((resnet) => {
		// 				console.log(resnet, ">>2")
		// 				if (resnet.isConnected) {
		// 					initData();
		// 					uni.offNetworkStatusChange()
		// 				} else {
		// 					uni.hideLoading()
		// 					showNetwork.value = true;
		// 					console.log(resnet, ">>>>>>")
		// 				}
		// 			})
		// 		} else {
		// 			initData()
		// 		}
		// 	}
		// })
	}
	// 充值刷新金额处理
	const onRefreshAmount = async () => {
		let userAmoutResult = await getSystemUseOrderRelateRuleAndRecord({
			invoke_method: 'static_4_money',
			'pre_cmd_para_id_public_user_info': userInfo.value.id_public_user_info,
			'pre_cmd_para_type_list': 1211
		}).catch((err) => {
			console.log(err, ">>>getUserAmount")
			userAmountInfo.value = {};
		});
		if (userAmoutResult) {
			let big_data = userAmoutResult.big_data || [];
			let amount = big_data[0] || {}
			userAmountInfo.value = amount;
		} else {
			return;
		}
	}
</script>

<style lang="less">
	.page-index {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #182836;

		.container-basic {
			position: relative;
			width: 100%;
			padding: 55rpx 32rpx 34rpx;
			box-sizing: border-box;
			display: flex;
			display: -webkit-flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.container-username-amount {
				position: relative;
				flex: 1;
				line-height: 48rpx;
				font-size: 46rpx;
				// font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				.wrap-username {
					position: relative;
					width: 100%;
					line-height: 46rpx;
					font-size: 46rpx;
					// font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.wrap-amount {
					position: relative;
					width: 100%;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;

					font-size: 28rpx;
					line-height: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin-top: 27rpx;
					padding-right: 15rpx;
					box-sizing: border-box;

					.cont-amount {
						position: relative;
						font-size: 40rpx;
						line-height: 40rpx;
						// font-family: Helvetica;
						font-weight: bold;
						color: #00FFF6;
						flex: auto;
						width: 0;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.btn-recharge {
						position: relative;
						width: 148rpx;
						height: 56rpx;
						line-height: 56rpx;
						// background: linear-gradient(0deg, #10A383 0%, #00FFF6 100%);
						background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
						border: 1px solid #FFFFFF;
						border-radius: 28rpx;
						box-sizing: border-box;

						font-size: 28rpx;
						// font-family: PingFang SC;
						font-weight: 600;
						// color: #FFFFFF;

						color: #182836;
						text-align: center;
						margin-left: 20rpx;
					}
				}
			}

			.wrap-avatar {
				position: relative;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				box-sizing: border-box;
				flex-shrink: 0;

				&.user-avatar {
					border: 5rpx solid #FFF;
				}
			}
		}

		.container-kingkong {
			position: relative;
			width: 750rpx;
			background: #121F2B;
			box-shadow: 0px 5rpx 0px 0px rgba(255, 255, 255, 0.3);
			border-radius: 72rpx 72rpx 0px 0px;
			margin-top: 20rpx;
			padding-bottom: 54rpx;
			box-sizing: border-box;

			.img-border {
				position: absolute;
				width: 580rpx;
				height: 4rpx;
				box-sizing: border-box;
				overflow: hidden;
				top: 0;
				left: 50%;
				transform: translate(-50%, 0);
				-webkit-transform: translate(-50%, 0);
			}

			.container-tocommunicate {
				position: relative;
				padding: 44rpx 32rpx 40rpx;
				box-sizing: border-box;

				.container-tocommunicate-main {
					position: relative;
					width: 100%;
					border: 4rpx solid #00FFF6;
					border-radius: 60rpx;
					padding: 30rpx;
					box-sizing: border-box;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					.container-tocommunicate-slogn {
						position: relative;
						width: 216rpx;
						height: 186rpx;
						// background: linear-gradient(0deg, #10A383 0%, #00FFF6 100%);
						background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
						border-radius: 32rpx;
						box-sizing: border-box;
						line-height: 186rpx;
						font-size: 56rpx;
						// font-family: HelloFont WenYiHei;
						font-weight: 400;
						color: #FFFFFF;
						text-align: center;
						display: flex;
						display: -webkit-flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

						.icon-baishitong {
							width: 168rpx;
							height: 52rpx;
						}
					}

					.tip-slogn {
						position: relative;
						width: 261rpx;
						height: 80rpx;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 48rpx;
						white-space: pre-line;
					}

					.btn-go {
						position: relative;
						width: 94rpx;
						height: 94rpx;
						background: #FFFFFF;
						border-radius: 50%;

						.img-go {
							position: absolute;
							width: 48rpx;
							height: 48rpx;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							-wekbit-transform: translate(-50%, -50%);
						}
					}
				}

			}

			.container-items {
				position: relative;
				width: 100%;
				// height: 100vh;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				justify-content: space-between;
				padding-left: 32rpx;
				padding-right: 32rpx;
				box-sizing: border-box;

				.container-item-column {
					position: relative;
					width: 334rpx;
					display: flex;
					display: -webkit-flex;
					flex-direction: column;
				}

				.wrap-item {
					position: relative;
					width: 334rpx;
					padding: 18rpx 18rpx 34rpx;
					border: 2rpx solid rgba(255, 255, 255, 0.1);
					border-radius: 48rpx;
					box-sizing: border-box;
					margin-bottom: 18rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.wrap-img-text {
						position: relative;
						width: 100%;

						.img-item {
							position: relative;
							width: 100%;
							border-radius: 36rpx;
							vertical-align: top;
							overflow: hidden;
						}

						.item-label {
							position: absolute;
							width: 146rpx;
							height: 72rpx;
							background: rgba(122, 124, 149, 1);
							border-radius: 32rpx 12rpx 32rpx 12rpx;
							box-sizing: border-box;
							bottom: -72rpx;
							left: 50%;
							transform: translate(-50%, -50%);
							-webkit-transform: translate(-50%, -50%);
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 72rpx;
							text-align: center;

							&.tool {
								background: rgba(71, 102, 141, 1);
							}

							&.guide {
								background: rgba(84, 115, 121, 1);
							}

							&.support {
								background: rgba(127, 130, 117, 1);
							}
						}
					}

					.tip-item {
						position: relative;
						width: 100%;
						text-align: center;
						margin-top: 55rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 38rpx;
					}
				}
			}
		}

		.btn-news{
			position: fixed;
			bottom: 148rpx;
			right: 40rpx;
			width: 120rpx;
			height: 120rpx;
			background: #121F2B;
			border: 1px solid rgba(0,0,0,0.2);
			box-shadow: 0px 5px 21px 0px rgba(39,196,254,0.16);
			opacity: 0.9;
			border-radius: 50%;
			.img-news{
				width: 50rpx;
				height: 50rpx;
				display: block;
				margin:35rpx auto;
			}
		}
		
		.tabbar-border {
			position: fixed;
			width: 100%;
			height: 2px;
			// background-color: #00FFF6;

			background: #00FFF6;
			bottom: 0;
			z-index: 3;
		}
	}
</style>